<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5</title>
    <link rel="stylesheet" href="./common.css">
</head>

    <!-- .keys>.key>div+span.sound -->
    <body>

        <div class="keys">
            <div class="key" data-key="65">
                <div>A</div>
                <span class="sound">clap</span>
            </div>
            <div class="key"data-key="83">
                <div>S</div>
                <span class="sound">hihat</span>
            </div>
            <div class="key"  data-key="68">
                <div>D</div>
                <span class="sound">kick</span>
            </div>
            <div class="key" data-key="70">
                <div>F</div>
                <span class="sound">openhat</span>
            </div>
            <div class="key" data-key="71">
                <div>G</div>
                <span class="sound">boom</span>
            </div>
            <div class="key"  data-key="72">
                <div>H</div>
                <span class="sound">ride</span>
            </div>
            <div class="key" data-key="74">
                <div>J</div>
                <span class="sound">snare</span>
            </div>
            <div class="key" data-key="75">
                <div>K</div>
                <span class="sound">tom</span>
            </div>
            <div class="key" data-key="76">
                <div>L</div>
                <span class="sound">tink</span>
            </div>
        </div>
        
        <audio data-key="71"  src=" sounds/boom.wav" autoplay ></audio>
        <audio id="clap" data-key="65" src="sounds/clap.wav" autoplay ></audio>
        <audio data-key="83" src=" sounds/hihat.wav" autoplay ></audio>
        <audio  data-key="68" src=" sounds/kick.wav" autoplay ></audio>
        <audio data-key="70" src=" sounds/openhat.wav" autoplay></audio>
        <audio data-key="72" src=" sounds/ride.wav" autoplay ></audio>
        <audio data-key="74" src=" sounds/snare.wav" autoplay ></audio>
        <audio data-key="76" src=" sounds/tink.wav" autoplay ></audio>
        <audio data-key="75" src=" sounds/tom.wav" autoplay></audio>
        <script>
        
            function playSound(event) {
                 console.log(event);
                let keyCode=event.keyCode;
                 const audio=document.querySelector('audio[data-key="'+keyCode+'"]');
                 console.log(audio);
                if(audio)
                audio.play();
                 const keys=document.querySelector('audio[data-key="'+keyCode+'"]');
                if(key)key.classList.add('playing');
                /*if (event.key === 'a') {
                    const claps = document.querySelector('#clap');
                    console.log(claps)
                    claps.play();
        
                }*/
            }
            window.addEventListener('keydown',playSound);
        
        </script>
    
</script>
</body>
</html>